<template>
    <div id="app">
        <div class="btn-box">
            <xy-button size="large" type="primary">大号按钮</xy-button>
            <xy-button size="medium" type="success">中号按钮</xy-button>
            <xy-button size="small" type="warning">小号按钮</xy-button>
            <xy-button size="mini" type="danger">mini按钮</xy-button>
            <xy-button size="medium" type="info">信息按钮</xy-button>
            <xy-button size="medium">默认按钮</xy-button>
            <xy-button
                size="medium"
                type="success"
                block
                icon="icon-zoomout"
                @click="handleClick"
                >块级按钮</xy-button
            >
            <xy-button size="medium" type="success" plain>朴素按钮</xy-button>
            <xy-button size="medium" type="warning" plain>朴素按钮</xy-button>
            <xy-button size="medium" type="danger" plain>朴素按钮</xy-button>
            <xy-button size="medium" type="info" plain>朴素按钮</xy-button>
            <xy-button size="medium" type="primary" circle>圆角按钮</xy-button>
            <xy-button
                size="medium"
                type="primary"
                disabled
                @click="handleClick"
                >禁用按钮</xy-button
            >
            <xy-button :loading="true" type="primary">加载</xy-button>
        </div>
        <xy-cell-group card>
            <xy-cell center title="单元格" left-icon="icon-zoomout">
                <template slot="rightIcon">
                    <xy-switch :size="24" />
                </template>
            </xy-cell>
            <xy-cell title="单元格" label="这是描述" arrow @click="handleClick"
                >内容</xy-cell
            >
            <xy-cell title="单元格" arrow @click="showPicker = true"
                >打开picker</xy-cell
            >
            <xy-cell title="单元格" arrow @click="showDatePicker = true"
                >打开date-picker</xy-cell
            >
        </xy-cell-group>

        <xy-picker
            title="picker"
            :visible="showPicker"
            :options="pickerData"
            :layer="2"
            @cancel="showPicker = false"
            round
        />

        <xy-date-picker
            :visible="showDatePicker"
            @cancel="showDatePicker = false"
        />

        <xy-popup
            :visible="showPopup"
            height="30%"
            @close="showPopup = false"
            closeable
            round
            close-icon="icon-close-circle"
        ></xy-popup>

        <xy-switch />

        <xy-switch :size="25" active-color="red" inactive-color="blue" />

        <xy-switch :size="20" loading />

        <xy-switch disabled :value="true" />

        <xy-nav-bar
            left-text="返回"
            left-arrow
            right-icon="icon-search"
            right-text="搜索"
            fixed
            >导航栏</xy-nav-bar
        >

        <xy-loading>loading...</xy-loading>

        <xy-loading vertical>loading...</xy-loading>

        <cell-group>
            <xy-field
                label="名称"
                placeholder="请输入名称"
                maxlength="10"
            ></xy-field>
            <xy-field
                label="名称"
                placeholder="请输入名称"
                maxlength="10"
                type="textarea"
            ></xy-field>
            <xy-field
                required
                label="数字"
                placeholder="只读"
                maxlength="10"
                type="number"
                readonly
            ></xy-field>
            <xy-field
                label="密码"
                placeholder="请输入密码"
                maxlength="10"
                type="password"
                disabled
            ></xy-field>
            <xy-field
                label="验证码"
                placeholder="请输入验证码"
                maxlength="10"
                type="text"
                center
            >
                <template #button>
                    <xy-button type="primary" size="small"
                        >发送验证码</xy-button
                    >
                </template>
            </xy-field>
            <xy-field
                label="标题"
                placeholder="光标右对齐"
                maxlength="10"
                align="right"
            ></xy-field>
        </cell-group>

        <xy-radio-group
            style="margin-top: 20px"
            v-model="radio1"
            @change="handleChange"
        >
            <xy-radio name="text">单选</xy-radio>
            <xy-radio name="text2">单选</xy-radio>
        </xy-radio-group>

        <xy-radio-group horizontal style="margin-top: 20px">
            <xy-radio name="text">单选</xy-radio>
            <xy-radio name="text2">单选</xy-radio>
        </xy-radio-group>
        <div style="margin: 0 0 16px 16px">
            <xy-checkbox>复选项1</xy-checkbox>
        </div>
        <xy-checkbox-group>
            <xy-checkbox name="0">复选项1</xy-checkbox>
            <xy-checkbox name="1">复选项2</xy-checkbox>
        </xy-checkbox-group>

        <xy-checkbox-group
            horizontal
            v-model="checkbox1"
            @change="handleChange"
        >
            <xy-checkbox name="0">复选项1</xy-checkbox>
            <xy-checkbox name="1">复选项2</xy-checkbox>
        </xy-checkbox-group>
        <div style="padding: 15px">
            <p class="xy-ellipsis">
                只是要添加，mixins很棒，但是如果您要使用util类（将一个类附加到元素上，将字体大小应用于该元素，请在SCSS中像这样进行for循环。只是要添加，mixins很棒，但是如果您要使用util类（将一个类附加到元素上，将字体大小应用于该元素，请在SCSS中像这样进行for循环。
            </p>
            <p class="xy-ellipsis-l2">
                只是要添加，mixins很棒，但是如果您要使用util类（将一个类附加到元素上，将字体大小应用于该元素，请在SCSS中像这样进行for循环。只是要添加，mixins很棒，但是如果您要使用util类（将一个类附加到元素上，将字体大小应用于该元素，请在SCSS中像这样进行for循环。
            </p>
        </div>
    </div>
</template>

<script>
import CellGroup from "../packages/components/cell/src/CellGroup.vue";
export default {
    components: { CellGroup },
    name: "App",
    data() {
        return {
            showPopup: false,
            checkbox1: ["0"],
            radio1: "text2",
            showPicker: false,
            showDatePicker: false,
            pickerData: [
                {
                    label: "选项1",
                    value: "value1",
                    children: [
                        {
                            label: "选项1-1",
                            value: "value1-1",
                        },
                    ],
                },
                {
                    label: "选项2",
                    value: "value2",
                    children: [],
                },
                {
                    label: "选项3",
                    value: "value3",
                    children: [],
                },
                {
                    label: "选项4",
                    value: "value4",
                    children: [],
                },
                {
                    label: "选项5",
                    value: "value5",
                    children: [],
                },
            ],
        };
    },
    mounted() {
        this.$toast.loading("loading...");
    },
    methods: {
        handleClick() {
            this.showPopup = true;
        },
        handleChange(e) {
            console.log(e);
        },
    },
};
</script>

<style lang="scss">
html,
body {
    margin: 0;
    padding: 0;
    background-color: #f7f8fa;
    width: 100%;
    height: 100%;
}
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    padding-top: 50px;
    padding-bottom: 100px;

    .btn-box {
        padding: 12px;
        .xy-button {
            margin-right: 10px;
            margin-bottom: 20px;
        }
    }
}
</style>
